<template>
    <div style="width: 1200px;margin: 0px auto">
      <h1>{{titleMessage}}</h1>
      <el-table
        ref="multipleTable"
        :data="packageDetils"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      v-if="packageshow">
        <!--<el-table-column
          type="selection"
          width="50">
        </el-table-column>-->
        <el-table-column
          label="套餐图片"
          width="150">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="100" :src="scope.row.gpimg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="gpname"
          label="套餐名称"
          width="350">
        </el-table-column>
        <el-table-column
          prop="gpprice"
          label="套餐价格"
          width="150">
        </el-table-column>
        <el-table-column
          prop="number"
          label="套餐数量"
          width="200">
        </el-table-column>
        <el-table-column
          label="价格小计"
          width="150">
          <template slot-scope="scope">
            {{scope.row.number*scope.row.gpprice}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="deleteOneGoodsPackage(scope.row.gpid)"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-table
        ref="multipleTable"
        :data="goodsData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-if="goodsShow">
        <!--<el-table-column
          type="selection"
          width="50">
        </el-table-column>-->
        <el-table-column
          label="图片"
          width="150">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="100" :src="scope.row.gdimage"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="gdname"
          label="菜名"
          width="350">
        </el-table-column>
        <el-table-column
          prop="gdprice"
          label="价格"
          width="150">
        </el-table-column>
        <el-table-column
          label="数量"
          prop="number"
          width="200"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="价格小计"
          width="150">
          <template slot-scope="scope">
            {{scope.row.number * scope.row.gdprice}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="deleteOneGoods(scope.row.gdid)"  circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <h2>共计商品{{number}}个总计{{allprice}}元  <el-button type="primary" @click="saveOrders()">去下单</el-button>
        <el-button type="primary" @click="toMenuindex()">返回菜单</el-button>
      </h2>
    </div>
</template>

<script>
  import axios from 'axios'
    export default {
      methods:{
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        deleteOne(gid){
          alert(gid)
        },
        handleChange(value) {
          console.log(value);
        },
        selectGoodsAndTypesById(){
          var _this = this;
          axios.get('/api/goodsDetails/selectGoodsAndTypesById').then(function (res) {
            _this.goodsData = res.data;
            _this.number = _this.goodsData.length + _this.number

            var price = 0;
            for (var i = 0; i < _this.goodsData.length; i++) {
              price = _this.goodsData[i].gdprice + price;
            }
            if (_this.goodsData.length != 0) {
              _this.allprice = price + _this.allprice
              _this.goodsShow = true;
            }

          })
        },
        selectGoodsPackageCar(){
          var _this = this;
          axios.get('/api/goodsPackage/selectGoodsPackageCar').then(function (res) {


            _this.packageDetils = res.data;

            _this.number = _this.number + _this.packageDetils.length

            var price = 0;
            for (var i = 0; i < _this.packageDetils.length; i++) {
              price = _this.packageDetils[i].gpprice + price
            }
            if (_this.packageDetils.length != 0){
              _this.packageshow = true;
              _this.allprice = price + _this.allprice
            }

          })
        },
        selectCarMessage(){
          this.selectGoodsAndTypesById();
          this.selectGoodsPackageCar();
        },
        saveOrders(){
          var _this  = this;
          axios.post(`/api/orders/saveOrders`).then(function (res) {
            if (res.data == 'defeat') {
              _this.$message('操作有误，请重新下单');
            } else {
              _this.$router.push('/OrderPay/'+ _this.allprice +"/"+res.data);

            }
          })
        },
        deleteOneGoodsPackage(gpid){
          var _this = this;
          axios.post(`/api/goodsPackage/deleteOneGoodsPackage/${gpid}`).then(function (res) {
            if (res.data == 'success'){

              _this.$message({
                message: '成功删除！',
                type: 'success'
              });
              location.reload()
            } else {
              _this.$message({
                message: '请再次尝试删除！',
                type: 'success'
              });
            }
          })

        },
        deleteOneGoods(gdid){
          var _this = this;
          axios.post(`/api/goodsDetails/deleteOneGoods/${gdid}`).then(function (res) {
            if (res.data == 'success'){
              _this.$message({
                message: '成功删除！',
                type: 'success'
              });
              location.reload()
            } else {
              _this.$message({
                message: '请再次尝试删除！',
                type: 'success'
              });
            }
          })
        },
        toMenuindex(){
          this.$router.push('/menuindex')
        }
      },
      mounted() {
        this.selectCarMessage();
        this.show = false;
      },
      name: "shopCar",
        data() {
          return {
            packageshow: false,
            goodsShow: false,
            titleMessage: '这是购物车页面',
            packageDetils: [{
              gpid: '',
              gpname: '',
              gpprice: '',
              pdetails: '',
            }],
            goodsData: [{
              gdid: '',
              gdname: '',
              gdimage: '',
              gdprice: '',
              //单个商品数量
              number: ''
            }],
            number: 0,
            allprice: 0,
            price1: 0,
            price2: 0,
            multipleSelection: []
          }
        }
    }
</script>

<style scoped>

</style>
